<template>
  <div class="divBox">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <div class="container">
          <el-form inline size="small" :model="from" ref="from" :label-position="labelPosition" label-width="100px">
            <el-row>
              <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="18">
                <el-form-item label="用户：">
                  <UserSearchable v-model="from.userId"></UserSearchable>
                </el-form-item>
                <el-form-item label="数据场：">

                  <!-- <el-select v-model="from.dataFactoryId" placeholder="请选择" class="selWidth" clearable>
                    <el-option v-for="item in options" :key="item.id" :label="item.name" :value="item.id">
                    </el-option>
                  </el-select> -->
                  <UserSearchable v-model="from.dataFactoryId" :type="'datafieldList'">
                    <template #dropdownTitle>
                      <span>数据场</span>

                    </template>
                    <template v-slot:dropdown="{ item }">
                      <span>{{ item.name }}</span>
                    </template>
                  </UserSearchable>

                </el-form-item>
                <el-form-item label="状态：">
                  <el-select v-model="from.approvalStatus" placeholder="请选择" class="selWidth" clearable>
                    <el-option :value="1" label="待审批"></el-option>
                    <el-option :value="2" label="通过"></el-option>
                    <el-option :value="3" label="拒绝"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" class="text-right from">
                <el-form-item>
                  <el-button class="mr10" size="small" type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
                  <el-button class="mr10" size="small" icon="el-icon-refresh" @click="reset()">重置</el-button>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
      </div>
      <el-table border ref="table" v-loading="loading" :data="tableData.data" style="width: 100%" size="mini"
        highlight-current-row>
        <el-table-column prop="id" label="ID" min-width="80" />
        <el-table-column prop="userId" label="用户UID" min-width="80" />
        <el-table-column prop="nickName" label="用户昵称" min-width="80" />
        <el-table-column prop="phone" label="用户电话" min-width="120" />
        <el-table-column prop="dataFactoryName" label="数据场" min-width="130" />
        <el-table-column prop="applyType" label="审批类型" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.applyType == 1">国际盘</el-button>
            <el-button size="mini" v-if="scope.row.applyType == 2">国内盘</el-button>
            <el-button size="mini" v-if="scope.row.applyType == 3">国际/国内</el-button>
            <el-button size="mini" v-if="scope.row.applyType == 4">实盘</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="approvalStatus" label="状态" min-width="120">
          <template slot-scope="scope">
            <el-button size="mini" v-if="scope.row.approvalStatus == 1">待审批</el-button>
            <el-button type="success" size="mini" v-if="scope.row.approvalStatus == 2">通过</el-button>
            <el-button type="danger" size="mini" v-if="scope.row.approvalStatus == 3">拒绝</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="approvalRemark" label="审批备注" min-width="100" />
        <el-table-column prop="approvalDate" label="审批时间" min-width="150" />
        <el-table-column label="操作" min-width="200" fixed="right" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" v-if="scope.row.approvalStatus == 1"
              @click="handleExamine(scope.row)">审批</el-button>
            <span v-else-if="scope.row.approvalStatus == 2">已通过</span>
            <span v-else-if="scope.row.approvalStatus == 3">被拒绝</span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination :page-sizes="[15, 30, 45, 60]" :page-size="from.limit" :current-page="from.page"
          layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" @size-change="handleSizeChange"
          @current-change="pageChange" />
      </div>
    </el-card>
    <!--用户列表-->
    <el-dialog title="用户列表" :visible.sync="userVisible" width="900px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <user-list v-if="userVisible" @getTemplateRow="getTemplateRow"></user-list>
      <span slot="footer" class="dialog-footer">
        <el-button @click="userclose()">取 消</el-button>
        <el-button type="primary" @click="usersubmit()">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="编辑" :visible.sync="dialogVisible" width="800px" :close-on-click-modal="false"
      :close-on-press-escape="false">
      <el-form ref="ruleForm" :model="ruleForm" label-width="120px">
        <el-form-item label="状态：">
          <el-radio-group v-model="ruleForm.approvalStatus">
            <el-radio :label="2">通过</el-radio>
            <el-radio :label="3">拒绝</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审批类型：">
          <el-radio-group v-model="ruleForm.applyType">
            <el-radio disabled :label="1">国际盘</el-radio>
            <el-radio disabled :label="2">国内盘</el-radio>
            <el-radio disabled :label="3">国际/国内</el-radio>
            <el-radio disabled :label="4">实盘</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注：">
          <el-input type="textarea" v-model="ruleForm.approvalRemark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close()">取 消</el-button>
        <el-button type="primary" @click="submit()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import userList from '@/components/userList'
import UserSearchable from "@/components/UserSearchable";
import {
  accountapplyList,
  accountapplyUpdate,
  accountapplyInfo
} from '@/api/user'
import {
  datafieldGetOption,
} from '@/api/dataField'
export default {
  name: 'accountapply',
  components: {
    userList,
    UserSearchable
  },
  data() {
    return {
      options: [],
      labelPosition: 'right',
      userVisible: false,
      from: {
        userId: '',
        dataFactoryId: '',
        approvalStatus: 1,
        page: 1,
        limit: 15,
      },
      loading: false,
      tableData: {
        data: [],
        total: 0
      },
      dialogVisible: false,
      ruleForm: {
        id: '',
        userId: '',
        applyType: '',
        approvalStatus: '',
        approvalRemark: '',
      }
    }
  },
  mounted() {
    datafieldGetOption({}).then(res => {
      console.log('数据场全列表', res)
      this.options = res
    }).catch(err => {
      console.log(err)
    })
    this.getlist()
  },
  methods: {
    selectUser() {
      this.userVisible = true
    },
    getTemplateRow(row) {
      this.from.userId = row.uid
    },
    userclose() {
      this.from.userId = ''
      this.userVisible = false
    },
    usersubmit() {
      this.userVisible = false
    },
    search() {
      this.from.page = 1
      this.from.limit = 15
      this.getlist()
    },
    reset() {
      this.from = {
        userId: '',
        dataFactoryId: '',
        approvalStatus: 1,
        page: 1,
        limit: 15,
      }
      this.getlist()
    },
    getlist() {
      this.loading = true
      accountapplyList(this.from).then(res => {
        this.tableData.data = res.list
        this.tableData.total = res.total
        this.loading = false
      }).catch(err => {
        console.log(err)
        this.loading = false
      })
    },
    handleExamine(row) {
      accountapplyInfo(row.id).then(res => {
        console.log(res)
        this.ruleForm.id = res.id
        this.ruleForm.userId = res.userId
        this.ruleForm.applyType = res.applyType
        this.dialogVisible = true
      }).catch(err => {
        console.log(err)
      })
    },
    close() {
      this.ruleForm = {
        id: '',
        userId: '',
        applyType: '',
        approvalStatus: '',
        approvalRemark: '',
      }
      this.dialogVisible = false
    },
    submit() {
      console.log(this.ruleForm)
      if (!this.ruleForm.approvalStatus) {
        return this.$message.error('请选择审批状态')
      }
      accountapplyUpdate(this.ruleForm).then(res => {
        this.close()
        this.$message.success('操作成功')
        this.getlist()
      }).catch(err => {
        console.log(err)
        this.$message.error(err)
      })
    },
    pageChange(page) {
      this.from.page = page
      this.getlist()
    },
    handleSizeChange(val) {
      this.from.limit = val
      this.getlist()
    }
  }
}
</script>

<style scoped lang="scss"></style>
